<template>
	<view>
		<view class="address">
			<button type="primary" size="mini" 
			class="btnaddress" v-if="JSON.stringify(address) === '{}'"
			@click="chooseaddress1">请选择收货地址+</button>
			<!-- 展示收货地址 -->
			<view class="showaddress" v-else>
				<view class="row-1">
					<view class="name">
						收货人： {{address.userName}}
					</view>
					<view class="phone" @click="chooseaddress1">
						<text>电话：{{address.telNumber}}</text>
						<uni-icons type="arrowright"></uni-icons>
					</view>
					
				</view>
				<view class="row-2">
					<text class="address2">收货地址：</text>
					<text class="address3">{{addstr}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations,mapGetters} from 'vuex'
	export default {
		name:"my_address",
		data() {
			return {
				
			};
		},
		computed:{
			...mapState('m_user',['address']),
			...mapGetters('m_user',['addstr'])
		},
		methods:{
			...mapMutations('m_user',['upaddress']),
			async chooseaddress1(){
				const [err,succ] = await uni.chooseAddress().catch(err=>err)
				if(err === null && succ.errMsg === 'chooseAddress:ok')
				this.upaddress(succ)
				
				if(err&& (err.errMsg == "chooseAddress:fail auth deny" || err.errMsg == 'chooseAddress:fail authorize no response'))
				// 通过调用这个方法 让用户重新授权
				this.reAuth()
			},
			async reAuth(){
				const {err2,confirmResult} = await uni.showModal({
					content:"检测到你没有打开地址权限，是否设置打开？",
					confirmText:'确认',
					cancelText:'取消'
				})
				if(err2) return
				if(confirmResult.cancel) return uni.$showMsg('你取消了地址授权！')
				if(confirmResult.confirm) return uni.openSetting({
					success:(settingResult)=>{
						if(!settingResult.authSetting['scope.address']) uni.$showMeg('你取消了地址授权！')
						if(settingResult.authSetting['scope.address']) uni.$showMeg('授权成功，请选择收货地址！')
					}
				})
			}
		},
		
		
	}
</script>

<style>
.address{
	padding: 15px 0px;
	box-sizing: border-box;
	border-bottom: 1px solid #c05230;
	box-shadow: 1px 1px 1px #c02b93;
	
}
.showaddress{
	padding: 5px;
	display: flex;
	line-height: 2em;
	font-size: 14px;
	flex-direction: column;
	
}
.btnaddress{
	left: 50%;
	transform: translateX(-50%);
}
.row-1{
	display: flex;
	justify-content: space-between;
}
.row-1 .phone text{
	margin: 5px;
}
.row-1 .name{
	width: 40%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.row-2{
	margin-top: 5px;
	display: flex;
	line-height: 1em;
	align-items: center;
}
.address2{
	width: 20%;
}
.address3{
	width: 80%;
}
</style>
